<template>
  <div class="dropdown-custom-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-dropdown-custom class="d-dropdown-text">
        <span>个人信息</span>
        <div slot="content" v-width="200">
          <div v-padding="20">
            <img :width="80" :height="80" style="border-radius: 80px;float: left;" src="http://www.ch-un.com/images/head.jpg" />
            <div style="height: 80px;margin-left: 90px;line-height: 80px;">Xiaohuan</div>
          </div>
          <d-row style="line-height: 40px;border-top: 1px solid #eee;">
            <d-col :width="12" class="text-center" style="border-right: 1px solid #eee;">
              <a>个人信息</a>
            </d-col>
            <d-col :width="12" class="text-center">
              <a>注销</a>
            </d-col>
          </d-row>
        </div>
      </d-dropdown-custom>
    </div>
    <h3 class="title">不同样式组合调用</h3>
    <div>
      <d-button-group>
        <d-button>Create</d-button>
        <d-dropdown-custom button>
          <span>Edit</span>
          <div slot="content" v-width="200" v-height="200">
            自定义
          </div>
        </d-dropdown-custom>
      </d-button-group>
      <d-button-group>
        <d-button color="primary">Create</d-button>
        <d-dropdown-custom class="d-btn-primary" button>
          <span>Edit</span>
          <div slot="content" v-width="200" v-height="200">
            自定义
          </div>
        </d-dropdown-custom>
      </d-button-group>
      <d-dropdown-custom class="d-btn-primary" button>
        <span>开始</span>
        <div slot="content" v-width="200" v-height="200">
          自定义
        </div>
      </d-dropdown-custom>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dropDownCustomDemo',
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
// .dropdown-custom-demo
</style>
